<template>
  <div>
    <Header title="行拓日报"></Header>
    <div class="page__main">
      <div class="page__scroller bg-white">
        <div class="water-mark-wrap">
          <div class="title-bg">
            {{datePicker.showData}}行拓日报
<!--            <button type="button" class="title-bg__btn" @click="tipDialog.show = true"></button>-->
          </div>
          <van-sticky :offset-top="46">
            <div class="pd-aside bg-white" style="padding-top: 10px;">
              <div class="selects" style="margin-bottom: 0">
                <div class="selects__item selects__item--date" @click="chooseDate">
                  {{datePicker.showData}}
                </div>
                <div class="selects__item" @click="chooseCity('province')">
                  {{areaInfo.showArea}}
                </div>
                <div class="selects__item" @click="chooseCity('city')">
                  {{cityInfo.showArea}}
                </div>
              </div>
            </div>
          </van-sticky>
          <van-tabs v-model="tabActiveName" class="init-tabs daily-tabs" swipeable sticky :offset-top="89">
            <van-tab name="day" title="日数据">
              <div class="box">
                <div class="title-box">
                  <div class="paper-title paper-title-account" style="float: left">出账收入</div>
                  <button type="button" class="helpBtn" @click="help(0)"></button>
                </div>
                <div class="paper-card">
                  <div class="paper-card__item">
                    <div class="paper-card__name">当日新增出账收入</div>
                    <div class="paper-card__blocks">
                      <div class="paper-card__block">
                        <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                        <span class="paper-card__num">{{numFormat(paperData.ITEM7_1)}}</span>
                        <span>万元</span>
                      </div>
                      <div class="paper-card__block">
                        <span class="paper-card__tip">环比</span>
                        <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                        <span class="trend" :class="changeRankClass(paperData.ITEM7_2)">{{numFormat(paperData.ITEM7_2)}}%</span>
                      </div>
                    </div>
                    <div
                      class="tip"
                      v-show="paperData.ITEM7_1 == '-' && paperData.ITEM7_2 == '-'"
                      >
                      注：系统月结无数据
                    </div>
                  </div>
                </div>
                <div class="title-box">
                  <div class="paper-title paper-title-opportunity" style="float: left">商机数</div>
                  <button type="button" class="helpBtn" @click="help(1)"></button>
                </div>
                <div class="paper-card paper-card--horizontal">
                  <div class="paper-card__item align-center">
                    <div class="paper-card__name">当日新增商机数</div>
                    <div class="mgb-8">
                      <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                      <span class="paper-card__num">{{numFormat(paperData.ITEM8_1)}}</span>
                      <span>个</span>
                    </div>
                    <div>
                      <span class="paper-card__tip">环比</span>
                      <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                      <span class="trend" :class="changeRankClass(paperData.ITEM8_2)">{{numFormat(paperData.ITEM8_2)}}%</span>
                    </div>
                  </div>
                  <div class="paper-card__item align-center">
                    <div class="paper-card__name">净增商机数</div>
                    <div class="mgb-4">
                      <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                      <span class="paper-card__num">{{numFormat(paperData.ITEM8_5)}}</span>
                      <span>个</span>
                    </div>
                  </div>
                </div>
                <div class="title-box">
                  <div class="paper-title paper-title-client" style="float: left">客户数</div>
                  <button type="button" class="helpBtn" @click="help(2)"></button>
                </div>
                <div class="paper-card pd-aside paper-card--vertical">
                  <div class="paper-card__item paper-card__item--with-img">
                    <div class="paper-card__name">当日新增合作客户数</div>
                    <div class="paper-card__blocks">
                      <div class="paper-card__block">
                        <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                        <span class="paper-card__num">{{numFormat(paperData.ITEM9_1)}}</span>
                        <span>户</span>
                      </div>
                      <div class="paper-card__block">
                        <span class="paper-card__tip">环比</span>
                        <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                        <span class="trend" :class="changeRankClass(paperData.ITEM9_2)">{{numFormat(paperData.ITEM9_2)}}%</span>
                      </div>
                    </div>
                  </div>
                  <div class="paper-card__item paper-card__item--with-img">
                    <div class="paper-card__name">净增合作客户数</div>
                    <div class="paper-card__blocks">
                      <div class="paper-card__block">
                        <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                        <span class="paper-card__num">{{numFormat(paperData.ITEM9_5)}}</span>
                        <span>户</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="title-box">
                  <div class="paper-title paper-title-contract" style="float: left">合同数</div>
                  <button type="button" class="helpBtn" @click="help(3)"></button>
                </div>
                <div class="paper-card paper-card--horizontal">
                  <div class="paper-card__item align-center">
                    <div class="paper-card__name">当日新增合同数</div>
                    <div class="mgb-8">
                      <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                      <span class="paper-card__num">{{numFormat(paperData.ITEM10_1)}}</span>
                      <span>个</span>
                    </div>
                    <div>
                      <span class="paper-card__tip">环比</span>
                      <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                      <span class="trend" :class="changeRankClass(paperData.ITEM10_2)">{{numFormat(paperData.ITEM10_2)}}%</span>
                    </div>
                  </div>
                  <div class="paper-card__item align-center">
                    <div class="paper-card__name">净增合同数</div>
                    <div class="mgb-4">
                      <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                      <span class="paper-card__num">{{numFormat(paperData.ITEM10_5)}}</span>
                      <span>个</span>
                    </div>
                  </div>
                </div>
                <div class="title-box">
                  <div class="paper-title paper-title-tenant" style="float: left">租户数</div>
                  <button type="button" class="helpBtn" @click="help(4)"></button>
                </div>
                <div class="paper-card paper-card--horizontal">
                  <div class="paper-card__item align-center">
                    <div class="paper-card__name">当日新增租户数</div>
                    <div class="mgb-8">
                      <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                      <span class="paper-card__num">{{numFormat(paperData.ITEM11_1)}}</span>
                      <span>户</span>
                    </div>
                    <div>
                      <span class="paper-card__tip">环比</span>
                      <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                      <span class="trend" :class="changeRankClass(paperData.ITEM11_2)">{{numFormat(paperData.ITEM11_2)}}%</span>
                    </div>
                  </div>
                  <div class="paper-card__item align-center">
                    <div class="paper-card__name">净增租户数</div>
                    <div class="mgb-4">
                      <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                      <span class="paper-card__num">{{numFormat(paperData.ITEM11_5)}}</span><span>户</span>
                    </div>
                  </div>
                </div>
                <div class="title-box">
                  <div class="paper-title paper-title-order" style="float: left">订单数</div>
                  <button type="button" class="helpBtn" @click="help(5)"></button>
                </div>
                <div class="paper-card paper-card--vertical">
                  <div class="paper-card__item">
                    <div class="paper-card__name paper-card__name--border">
                      当日新增签约订单数
                      <div class="paper-card__name-right">
                        <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                        <span class="paper-card__num">{{numFormat(paperData.ITEM12_1)}}</span><span>个</span>
                      </div>
                    </div>
                  </div>
                  <div class="paper-card__item">
                    <div class="paper-card__blocks">
                      <div class="paper-card__block">
                        <span class="paper-card__tip">环比</span>
                        <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                        <span class="trend" :class="changeRankClass(paperData.ITEM12_2)">{{numFormat(paperData.ITEM12_2)}}%</span>
                      </div>
                      <div class="paper-card__block paper-card__block--none">
                        <span class="paper-card__label paper-card__label--red">净增{{numFormat(paperData.ITEM26_2)}}个</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="paper-card paper-card--vertical">
                  <div class="paper-card__item">
                    <div class="paper-card__name paper-card__name--border">
                      当日新增起租订单数
                      <div class="paper-card__name-right">
                        <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                        <span class="paper-card__num">{{numFormat(paperData.ITEM13_1)}}</span><span>个</span>
                      </div>
                    </div>
                  </div>
                  <div class="paper-card__item">
                    <div class="paper-card__blocks">
                      <div class="paper-card__block">
                        <span class="paper-card__tip">环比</span>
                        <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                        <span class="trend" :class="changeRankClass(paperData.ITEM13_2)">{{numFormat(paperData.ITEM13_2)}}%</span>
                      </div>
                      <div class="paper-card__block paper-card__block--none">
                        <span class="paper-card__label paper-card__label--red">净增{{numFormat(paperData.ITEM27_2)}}个</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="paper-title paper-title-trend">日{{tagType.daySelectName}}变化趋势</div>
                <div class="taglist mgb-8">
                  <swiper :options="swiperOption">
                    <swiper-slide
                      v-for="(item, index) in tagType.list"
                      :key="index">
                      <div
                        class="taglist__inner"
                        :class="tagType.daySelect == item.id ? 'taglist__inner--current': ''"
                        @click="handleChangeType('daySelect', item.id, item.name)">
                        {{item.name}}
                      </div>
                    </swiper-slide>
                  </swiper>
                </div>
                <div style="height: 180px;" class="mgb-8">
                  <LineChart :data="dayTrend.lineData"></LineChart>
                </div>
                <div>
                  <div class="paper-title paper-title-incometotal">
                    省分当日{{tagType.dayIncomeName}}情况
                    <div class="paper-title__ranks" :class="'paper-title__ranks--' + dayIncomeData.rank">
                    <span
                      class="paper-title__rank paper-title__rank--asc"
                      @click="handleRank('dayIncome', 'asc')"
                    >正序</span>
                      <span
                        class="paper-title__rank paper-title__rank--desc"
                        @click="handleRank('dayIncome', 'desc')"
                      >倒序</span>
                    </div>
                  </div>
                  <div class="taglist mgb-15">
                    <swiper :options="swiperOption">
                      <swiper-slide
                        v-for="(item, index) in tagType.list"
                        :key="index">
                        <div
                          v-if="item.id != 0"
                          class="taglist__inner"
                          :class="tagType.dayIncome == item.id ? 'taglist__inner--current': ''"
                          @click="handleChangeType('dayIncome', item.id, item.name)">
                          {{item.name}}
                        </div>
                        <div
                          v-else
                          class="taglist__inner"
                          :class="tagType.dayIncome == item.id ? 'taglist__inner--current': ''"
                          @click="handleChangeType('dayIncome', item.id, '出账')">
                          出账
                        </div>
                      </swiper-slide>
                    </swiper>
                  </div>
                  <div class="table-wrap">
                    <slot v-if="tagType.dayIncome == '0'">
                      <table class="table">
                        <tr>
                          <th>省分</th>
                          <th>出账（元）</th>
                          <th>环比</th>
                        </tr>
                        <tr v-show="dayIncomeData.loading">
                          <td colspan="3">
                            <van-loading size="24px" vertical>数据加载中...</van-loading>
                          </td>
                        </tr>
                        <tr v-for="(item, index) in dayIncomeData.showList" :key="index">
                          <td>{{item.AREA_NAME}}</td>
                          <td>{{numFormat(item.INCOME)}}</td>
                          <td>{{item.ROUNDRATE}}</td>
                        </tr>
                      </table>
                    </slot>
                    <slot v-else>
                      <table class="table">
                        <tr>
                          <th>省分</th>
                          <th>新增（个）</th>
                          <th>减少（个）</th>
                          <th>净增（个）</th>
                          <th>环比</th>
                        </tr>
                        <tr v-show="dayIncomeData.loading">
                          <td colspan="5">
                            <van-loading size="24px" vertical>数据加载中...</van-loading>
                          </td>
                        </tr>
                        <tr v-for="(item, index) in dayIncomeData.showList" :key="index">
                          <td>{{item.AREA_NAME}}</td>
                          <td>{{numFormat(item.NEWADD)}}</td>
                          <td>{{numFormat(item.REDUCE)}}</td>
                          <td>{{numFormat(item.NETGAIN)}}</td>
                          <td>{{numFormat(item.ROUNDRATE)}}</td>
                        </tr>
                      </table>
                    </slot>
                    <div class="show-more" @click="handleSynthesisListRank('dayIncome', dayIncomeData.showAll)" v-show="!dayIncomeData.loading && dayIncomeData.showList.length >= 5">
                      {{dayIncomeData.showAll == false ? '查看更多' : '折叠'}}
                    </div>
                  </div>
                </div>
              </div>
            </van-tab>
            <van-tab name="month" title="月数据">
              <div class="box">
                <div class="title-box">
                  <div class="paper-title paper-title-account" style="float: left">全额收入</div>
                  <button type="button" class="helpBtn" @click="help(6)"></button>
                </div>
                <div class="paper-card">
                  <div class="paper-card__item">
                    <div class="paper-card__name">本月累计全额收入</div>
                    <div class="paper-card__blocks">
                      <div class="paper-card__block">
                        <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                        <span class="paper-card__num" v-show="!paperDataLoading">{{numFormat(paperData.ITEM14_1)}}</span><span>万元</span>
                      </div>
                      <div class="paper-card__block">
                        <span class="paper-card__tip">环比</span>
                        <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                        <span class="trend" :class="changeRankClass(paperData.ITEM14_2)" v-show="!paperDataLoading">{{numFormat(paperData.ITEM14_2)}}%</span>
                      </div>
                    </div>
                    <div
                      class="tip"
                      v-show="paperData.ITEM14_1 == '-' && paperData.ITEM14_2 == '-'"
                      >
                      注：系统月结无数据
                    </div>
                  </div>
                </div>
                <div class="title-box">
                  <div class="paper-title paper-title-income" style="float: left">经营收入</div>
                  <button type="button" class="helpBtn" @click="help(7)"></button>
                </div>
                <div class="paper-card pd-aside paper-card--vertical">
                  <div class="paper-card__item paper-card__item--with-img">
                    <div class="paper-card__name">上月经营收入</div>
                    <div class="paper-card__blocks">
                      <div class="paper-card__block">
                        <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                        <span class="paper-card__num" v-show="!paperDataLoading">{{numFormat(paperData.ITEM23_1)}}</span><span>万元</span>
                      </div>
                      <div class="paper-card__block paper-card__block--none">
                        <span class="paper-card__tip">环比</span>
                        <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                        <span class="trend" :class="changeRankClass(paperData.ITEM23_2)" v-show="!paperDataLoading">{{numFormat(paperData.ITEM23_2)}}%</span>
                      </div>
                    </div>
                    <div
                      class="tip"
                      v-show="paperData.ITEM23_1 == '-' && paperData.ITEM23_2 == '-'"
                      >
                      注：系统月结无数据
                    </div>
                  </div>
                </div>
                <div class="title-box">
                  <div class="paper-title paper-title-opportunity" style="float: left">商机数</div>
                  <button type="button" class="helpBtn" @click="help(8)"></button>
                </div>
                <div class="paper-card paper-card--horizontal">
                  <div class="paper-card__item align-center">
                    <div class="paper-card__name">本月累计新增商机数</div>
                    <div class="mgb-8">
                      <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                      <span class="paper-card__num" v-show="!paperDataLoading">{{numFormat(paperData.ITEM15_1)}}</span><span>个</span>
                    </div>
                    <div>
                      <span class="paper-card__tip">环比</span>
                      <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                      <span class="trend" :class="changeRankClass(paperData.ITEM15_2)" v-show="!paperDataLoading">{{numFormat(paperData.ITEM15_2)}}%</span>
                    </div>
                  </div>
                  <div class="paper-card__item align-center">
                    <div class="paper-card__name">净增商机数</div>
                    <div class="mgb-4">
                      <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                      <span class="paper-card__num" v-show="!paperDataLoading">{{numFormat(paperData.ITEM15_5)}}</span><span>个</span>
                    </div>
                  </div>
                </div>
                <div class="title-box">
                  <div class="paper-title paper-title-client" style="float: left">客户数</div>
                  <button type="button" class="helpBtn" @click="help(9)"></button>
                </div>
                <div class="paper-card pd-aside paper-card--vertical">
                  <div class="paper-card__item paper-card__item--with-img">
                    <div class="paper-card__name">本月累计新增合作客户数</div>
                    <div class="paper-card__blocks">
                      <div class="paper-card__block">
                        <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                        <span class="paper-card__num" v-show="!paperDataLoading">{{numFormat(paperData.ITEM16_1)}}</span><span>户</span>
                      </div>
                      <div class="paper-card__block">
                        <span class="paper-card__tip">环比</span>
                        <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                        <span class="trend" :class="changeRankClass(paperData.ITEM16_2)" v-show="!paperDataLoading">{{numFormat(paperData.ITEM16_2)}}%</span>
                      </div>
                    </div>
                  </div>
                  <div class="paper-card__item paper-card__item--with-img">
                    <div class="paper-card__name">本月累计净增合作客户数</div>
                    <div class="paper-card__blocks">
                      <div class="paper-card__block">
                        <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                        <span class="paper-card__num" v-show="!paperDataLoading">{{numFormat(paperData.ITEM16_5)}}</span><span>户</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="title-box">
                  <div class="paper-title paper-title-contract" style="float: left">合同数</div>
                  <button type="button" class="helpBtn" @click="help(10)"></button>
                </div>
                <div class="paper-card paper-card--horizontal">
                  <div class="paper-card__item align-center">
                    <div class="paper-card__name">本月累计新增合同数</div>
                    <div class="mgb-8">
                      <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                      <span class="paper-card__num" v-show="!paperDataLoading">{{numFormat(paperData.ITEM17_1)}}</span><span>个</span>
                    </div>
                    <div>
                      <span class="paper-card__tip">环比</span>
                      <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                      <span class="trend" :class="changeRankClass(paperData.ITEM17_2)" v-show="!paperDataLoading">{{numFormat(paperData.ITEM17_2)}}%</span>
                    </div>
                  </div>
                  <div class="paper-card__item align-center">
                    <div class="paper-card__name">净增合同数</div>
                    <div class="mgb-4">
                      <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                      <span class="paper-card__num" v-show="!paperDataLoading">{{numFormat(paperData.ITEM17_5)}}</span><span>个</span>
                    </div>
                  </div>
                </div>
                <div class="title-box">
                  <div class="paper-title paper-title-tenant" style="float: left">租户数</div>
                  <button type="button" class="helpBtn" @click="help(11)"></button>
                </div>
                <div class="paper-card paper-card--horizontal">
                  <div class="paper-card__item align-center">
                    <div class="paper-card__name">本月累计新增租户数</div>
                    <div class="mgb-8">
                      <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                      <span class="paper-card__num" v-show="!paperDataLoading">{{numFormat(paperData.ITEM18_1)}}</span><span>户</span>
                    </div>
                    <div>
                      <span class="paper-card__tip">环比</span>
                      <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                      <span class="trend" :class="changeRankClass(paperData.ITEM18_2)" v-show="!paperDataLoading">{{numFormat(paperData.ITEM18_2)}}%</span>
                    </div>
                  </div>
                  <div class="paper-card__item align-center">
                    <div class="paper-card__name">净增租户数</div>
                    <div class="mgb-4">
                      <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                      <span class="paper-card__num" v-show="!paperDataLoading">{{numFormat(paperData.ITEM18_5)}}</span><span>户</span>
                    </div>
                  </div>
                </div>
                <div class="title-box">
                  <div class="paper-title paper-title-order" style="float: left">订单数</div>
                  <button type="button" class="helpBtn" @click="help(12)"></button>
                </div>
                <div class="paper-card paper-card--vertical">
                  <div class="paper-card__item">
                    <div class="paper-card__name paper-card__name--border">
                      本月累计新增签约订单数
                      <div class="paper-card__name-right">
                        <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                        <span class="paper-card__num" v-show="!paperDataLoading">{{numFormat(paperData.ITEM19_1)}}</span><span>个</span>
                      </div>
                    </div>
                  </div>
                  <div class="paper-card__item">
                    <div class="paper-card__blocks">
                      <div class="paper-card__block">
                        <span class="paper-card__tip">环比</span>
                        <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                        <span class="trend" :class="changeRankClass(paperData.ITEM19_2)" v-show="!paperDataLoading">{{numFormat(paperData.ITEM19_2)}}%</span>
                      </div>
                      <div class="paper-card__block paper-card__block--none">
                        <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                        <span class="paper-card__label paper-card__label--red" v-show="!paperDataLoading">
                          净增{{numFormat(paperData.ITEM28_2)}}个
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="paper-card paper-card--vertical">
                  <div class="paper-card__item">
                    <div class="paper-card__name paper-card__name--border">
                      本月累计新增起租订单数
                      <div class="paper-card__name-right">
                        <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                        <span class="paper-card__num" v-show="!paperDataLoading">{{numFormat(paperData.ITEM20_1)}}</span><span>个</span>
                      </div>
                    </div>
                  </div>
                  <div class="paper-card__item">
                    <div class="paper-card__blocks">
                      <div class="paper-card__block mgb-8">
                        <span class="paper-card__tip">环比</span>
                        <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                        <span class="trend" :class="changeRankClass(paperData.ITEM20_2)" v-show="!paperDataLoading">{{numFormat(paperData.ITEM20_2)}}%</span>
                      </div>
                      <div class="paper-card__block--none">
                        <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                        <span class="paper-card__label paper-card__label--red" v-show="!paperDataLoading">
                          净增{{numFormat(paperData.ITEM29_2)}}个
                        </span>
                      </div>
                    </div>
                    <div>
                      <span class="paper-card__tip">累计起租率</span>
                      <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                      <span class="text--red" v-show="!paperDataLoading">{{numFormat(paperData.ITEM20_4)}}%</span>
                    </div>
                  </div>
                </div>
                <div class="paper-title paper-title-trend">月{{tagType.monthSelectName}}变化趋势</div>
                <div class="taglist mgb-8">
                  <swiper :options="swiperOption">
                    <swiper-slide
                      v-for="(item, index) in tagType.list"
                      :key="index">
                      <div
                        class="taglist__inner"
                        :class="tagType.monthSelect == item.id ? 'taglist__inner--current': ''"
                        @click="handleChangeType('monthSelect', item.id, item.name)">
                        {{item.name}}
                      </div>
                    </swiper-slide>
                  </swiper>
                </div>
                <div style="height: 180px;" class="mgb-8">
                  <LineChartIncome :data="monthTrend.lineDataIncome" v-if="tagType.monthSelect == '0'"></LineChartIncome>
                  <LineChart :data="monthTrend.lineData" v-else></LineChart>
                </div>
                <div>
                  <div class="paper-title paper-title-incometotal">
                    省分当月{{tagType.monthIncomeName}}情况
                    <div class="paper-title__ranks" :class="'paper-title__ranks--' + monthIncomeData.rank">
                      <span
                        class="paper-title__rank paper-title__rank--asc"
                        @click="handleRank('monthIncome', 'asc')"
                      >正序</span>
                      <span
                        class="paper-title__rank paper-title__rank--desc"
                        @click="handleRank('monthIncome', 'desc')"
                      >倒序</span>
                    </div>
                  </div>
                  <div class="taglist mgb-15">
                    <swiper :options="swiperOption">
                      <swiper-slide
                        v-for="(item, index) in tagType.list"
                        :key="index">
                        <div
                          v-if="item.id != 0"
                          class="taglist__inner"
                          :class="tagType.monthIncome == item.id ? 'taglist__inner--current': ''"
                          @click="handleChangeType('monthIncome', item.id, item.name)">
                          {{item.name}}
                        </div>
                        <div
                          v-else
                          class="taglist__inner"
                          :class="tagType.monthIncome == item.id ? 'taglist__inner--current': ''"
                          @click="handleChangeType('monthIncome', item.id, '出账')">
                          出账
                        </div>
                      </swiper-slide>
                    </swiper>
                  </div>
                  <div class="table-wrap">
                    <slot v-if="tagType.monthIncome == '0'">
                      <table class="table">
                        <tr>
                          <th>省分</th>
                          <th>出账（元）</th>
                          <th>环比</th>
                        </tr>
                        <tr v-show="monthIncomeData.loading">
                          <td colspan="3">
                            <van-loading size="24px" vertical>数据加载中...</van-loading>
                          </td>
                        </tr>
                        <tr v-for="(item, index) in monthIncomeData.showList" :key="index">
                          <td>{{item.AREA_NAME}}</td>
                          <td>{{numFormat(item.INCOME)}}</td>
                          <td>{{numFormat(item.ROUNDRATE)}}</td>
                        </tr>
                      </table>
                    </slot>
                    <slot v-else>
                      <table class="table">
                        <tr>
                          <th>省分</th>
                          <th>新增（个）</th>
                          <th>减少（个）</th>
                          <th>净增（个）</th>
                          <th>环比</th>
                        </tr>
                        <tr v-show="monthIncomeData.loading">
                          <td colspan="5">
                            <van-loading size="24px" vertical>数据加载中...</van-loading>
                          </td>
                        </tr>
                        <tr v-for="(item, index) in monthIncomeData.showList" :key="index">
                          <td>{{item.AREA_NAME}}</td>
                          <td>{{numFormat(item.NEWADD)}}</td>
                          <td>{{numFormat(item.REDUCE)}}</td>
                          <td>{{numFormat(item.NETGAIN)}}</td>
                          <td>{{numFormat(item.ROUNDRATE)}}</td>
                        </tr>
                      </table>
                    </slot>
                    <div class="show-more" @click="handleSynthesisListRank('monthIncome', monthIncomeData.showAll)" v-show="!monthIncomeData.loading && monthIncomeData.showList.length >= 5">
                      {{monthIncomeData.showAll == false ? '查看更多' : '折叠'}}
                    </div>
                  </div>
                </div>
              </div>
            </van-tab>
            <van-tab name="year" title="年数据">
              <div class="box">
                <div class="title-box">
                  <div class="paper-title paper-title-account" style="float: left">全额收入</div>
                  <button type="button" class="helpBtn" @click="help(13)"></button>
                </div>
                <div class="paper-card">
                  <div class="paper-card__item">
                    <div class="paper-card__name">本年累计全额收入</div>
                    <div class="paper-card__blocks">
                      <div class="paper-card__block">
                        <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                        <span class="paper-card__num" v-show="!paperDataLoading">{{numFormat(paperData.ITEM0_1)}}</span><span>万元</span>
                      </div>
                      <div class="paper-card__block">
                        <span class="paper-card__tip">环比</span>
                        <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                        <span class="trend" :class="changeRankClass(paperData.ITEM0_2)"  v-show="!paperDataLoading">{{numFormat(paperData.ITEM0_2)}}%</span>
                      </div>
                    </div>
                    <div
                      class="tip"
                      v-show="paperData.ITEM0_1 == '-' && paperData.ITEM0_2 == '-'"
                      >
                      注：系统月结无数据
                    </div>
                  </div>
                </div>
                <div class="title-box">
                  <div class="paper-title paper-title-income" style="float: left">经营收入</div>
                  <button type="button" class="helpBtn" @click="help(14)"></button>
                </div>
                <div class="paper-card pd-aside paper-card--vertical">
                  <div class="paper-card__item paper-card__item--with-img">
                    <div class="paper-card__name">本年至上月累计经营收入</div>
                    <div class="paper-card__blocks">
                      <div class="paper-card__block">
                        <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                        <span class="paper-card__num" v-show="!paperDataLoading">{{numFormat(paperData.ITEM22_1)}}</span><span>万元</span>
                      </div>
                      <div class="paper-card__block paper-card__block--none">
                        <span class="paper-card__tip">环比</span>
                        <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                        <span class="trend" :class="changeRankClass(paperData.ITEM22_2)" v-show="!paperDataLoading">{{numFormat(paperData.ITEM22_2)}}%</span>
                      </div>
                    </div>
                    <div
                      class="tip"
                      v-show="paperData.ITEM22_1 == '-' && paperData.ITEM22_2 == '-'"
                      >
                      注：系统月结无数据
                    </div>
                  </div>
                </div>
                <div class="title-box">
                  <div class="paper-title paper-title-opportunity" style="float: left">商机数</div>
                  <button type="button" class="helpBtn" @click="help(15)"></button>
                </div>
                <div class="paper-card paper-card--horizontal">
                  <div class="paper-card__item align-center">
                    <div class="paper-card__name">历史累计商机数</div>
                    <div class="mgb-8">
                      <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                      <span class="paper-card__num" v-show="!paperDataLoading">{{numFormat(paperData.ITEM1_1)}}</span><span>个</span>
                    </div>
                    <div>
                      <span class="paper-card__tip">环比</span>
                      <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                      <span class="trend" :class="changeRankClass(paperData.ITEM1_2)" v-show="!paperDataLoading">{{numFormat(paperData.ITEM1_2)}}%</span>
                    </div>
                  </div>
                  <div class="paper-card__item align-center">
                    <div class="paper-card__name">本年净增商机数</div>
                    <div class="mgb-8">
                      <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                      <span class="paper-card__num" v-show="!paperDataLoading">{{numFormat(paperData.ITEM1_4)}}</span><span>个</span>
                    </div>
                  </div>
                </div>
                <div class="title-box">
                  <div class="paper-title paper-title-client" style="float: left">客户数</div>
                  <button type="button" class="helpBtn" @click="help(16)"></button>
                </div>
                <div class="paper-card pd-aside paper-card--vertical">
                  <div class="paper-card__item paper-card__item--with-img">
                    <div class="paper-card__name">本年累计新增合作客户数</div>
                    <div class="paper-card__blocks">
                      <div class="paper-card__block">
                        <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                        <span class="paper-card__num" v-show="!paperDataLoading">{{numFormat(paperData.ITEM100_3)}}</span><span>户</span>
                      </div>
                      <div class="paper-card__block">
                        <span class="paper-card__tip">环比</span>
                        <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                        <span class="trend" :class="changeRankClass(paperData.ITEM100_4)" v-show="!paperDataLoading">{{numFormat(paperData.ITEM100_4)}}%</span>
                      </div>
                    </div>
                  </div>
                  <div class="paper-card__item paper-card__item--with-img">
                    <div class="paper-card__name">本年累计净增合作客户数</div>
                    <div class="paper-card__blocks">
                      <div class="paper-card__block">
                        <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                        <span class="paper-card__num" v-show="!paperDataLoading">{{numFormat(paperData.ITEM100_5)}}</span><span>户</span>
                      </div>
                    </div>
                  </div>
                  <div class="paper-card__item paper-card__item--with-img">
                    <div class="paper-card__name">历史累计合作客户数</div>
                    <div class="paper-card__blocks">
                      <div class="paper-card__block">
                        <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                        <span class="paper-card__num" v-show="!paperDataLoading">{{numFormat(paperData.ITEM30_2_1)}}</span><span>户</span>
                      </div>
                    </div>
                  </div>
                </div>
                <!--<div class="paper-card" style="padding-top: 10px;">-->
                  <!--<div class="pie-chart">-->
                    <!--<div class="pie-chart__total">-->
                      <!--<div class="pie-chart__total-name">历史累计客户数</div>-->
                      <!--<div class="pie-chart__total-num">{{numFormat(paperData.ITEM2_1)}}</div>-->
                    <!--</div>-->
                    <!--<PieChart :data="pieData"></PieChart>-->
                  <!--</div>-->
                <!--</div>-->
                <div class="title-box">
                  <div class="paper-title paper-title-contract" style="float: left">合同数</div>
                  <button type="button" class="helpBtn" @click="help(17)"></button>
                </div>
                <div class="paper-card paper-card--horizontal">
                  <div class="paper-card__item align-center">
                    <div class="paper-card__name">历史累计合同数</div>
                    <div class="mgb-8">
                      <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                      <span class="paper-card__num" v-show="!paperDataLoading">{{numFormat(paperData.ITEM3_1)}}</span><span>个</span>
                    </div>
                    <div>
                      <span class="paper-card__tip">环比</span>
                      <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                      <span class="trend" :class="changeRankClass(paperData.ITEM3_2)" v-show="!paperDataLoading">{{numFormat(paperData.ITEM3_2)}}%</span>
                    </div>
                  </div>
                  <div class="paper-card__item align-center">
                    <div class="paper-card__name">本年净增合同数</div>
                    <div class="mgb-8">
                      <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                      <span class="paper-card__num" v-show="!paperDataLoading">{{numFormat(paperData.ITEM3_4)}}</span><span>个</span>
                    </div>
                  </div>
                </div>
                <div class="title-box">
                  <div class="paper-title paper-title-tenant" style="float: left">租户数</div>
                  <button type="button" class="helpBtn" @click="help(18)"></button>
                </div>
                <div class="paper-card paper-card--horizontal">
                  <div class="paper-card__item align-center">
                    <div class="paper-card__name">历史累计租户数</div>
                    <div class="mgb-8">
                      <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                      <span class="paper-card__num" v-show="!paperDataLoading">{{numFormat(paperData.ITEM4_1)}}</span><span>户</span>
                    </div>
                    <div>
                      <span class="paper-card__tip">环比</span>
                      <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                      <span class="trend" :class="changeRankClass(paperData.ITEM4_2)" v-show="!paperDataLoading">{{numFormat(paperData.ITEM4_2)}}%</span>
                    </div>
                  </div>
                  <div class="paper-card__item align-center">
                    <div class="paper-card__name">本年净增租户数</div>
                    <div class="mgb-8">
                      <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                      <span class="paper-card__num" v-show="!paperDataLoading">{{numFormat(paperData.ITEM4_4)}}</span><span>户</span>
                    </div>
                  </div>
                </div>
                <div class="title-box">
                  <div class="paper-title paper-title-order" style="float: left">订单数</div>
                  <button type="button" class="helpBtn" @click="help(19)"></button>
                </div>
                <div class="paper-card paper-card--vertical">
                  <div class="paper-card__item">
                    <div class="paper-card__name paper-card__name--border">
                      本年累计新增签约订单数
                      <div class="paper-card__name-right">
                        <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                        <span class="paper-card__num" v-show="!paperDataLoading">{{numFormat(paperData.ITEM5_1)}}</span><span>个</span>
                      </div>
                    </div>
                  </div>
                  <div class="paper-card__item">
                    <div class="paper-card__blocks">
                      <div class="paper-card__block">
                        <span class="paper-card__tip">环比</span>
                        <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                        <span class="trend" :class="changeRankClass(paperData.ITEM5_2)" v-show="!paperDataLoading">{{numFormat(paperData.ITEM5_2)}}%</span>
                      </div>
                      <div class="paper-card__block paper-card__block--none">
                        <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                        <span class="paper-card__label paper-card__label--red" v-show="!paperDataLoading">净增{{numFormat(paperData.ITEM24_1)}}个</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="paper-card paper-card--vertical">
                  <div class="paper-card__item">
                    <div class="paper-card__name paper-card__name--border">
                      本年累计新增起租订单数
                      <div class="paper-card__name-right">
                        <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                        <span class="paper-card__num" v-show="!paperDataLoading">{{numFormat(paperData.ITEM6_1)}}</span><span>个</span>
                      </div>
                    </div>
                  </div>
                  <div class="paper-card__item">
                    <div class="paper-card__blocks">
                      <div class="paper-card__block">
                        <span class="paper-card__tip">环比</span>
                        <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                        <span class="trend" :class="changeRankClass(paperData.ITEM6_2)" v-show="!paperDataLoading">{{numFormat(paperData.ITEM6_2)}}%</span>
                      </div>
                      <div class="paper-card__block paper-card__block--none">
                        <van-loading size="14px" v-show="paperDataLoading"></van-loading>
                        <span class="paper-card__label paper-card__label--red" v-show="!paperDataLoading">净增{{numFormat(paperData.ITEM25_1)}}个</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </van-tab>
          </van-tabs>
          <div class="footer-tip">了解更多信息，请登录PC端运营数据展示系统</div>
          <WaterMark :length="13"></WaterMark>
        </div>
      </div>
    </div>
    <van-popup
      v-model="datePicker.show"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-datetime-picker
        v-model="datePicker.currentDate"
        type="date"
        :min-date="datePicker.minDate"
        :max-date="datePicker.maxDate"
        @cancel="handleCanleDate"
        @confirm="handleConfirmDate"
      ></van-datetime-picker>
    </van-popup>
    <van-popup
      v-model="areaInfo.show"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-picker
        show-toolbar
        :columns="areaInfo.columns"
        :defaultIndex='areaInfo.defaultIndex'
        @cancel="cancelFn('province')"
        @confirm="confirmFnProvince"
      />
    </van-popup>
    <van-popup
      v-model="cityInfo.show"
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-picker
        show-toolbar
        :columns="cityInfo.columns"
        :defaultIndex='cityInfo.defaultIndex'
        @cancel="cancelFn('city')"
        @confirm="confirmFnCity"
      ></van-picker>
    </van-popup>
    <div class="tip-dialog" v-show="tipDialog.show">
      <div class="tip-dialog__main">
        <div class="tip-dialog__header">
          指标说明
          <button type="button" class="tip-dialog__close" @click="tipDialog.show = false"></button>
        </div>
        <div class="tip-dialog__body">
          <div class="tip-dialog__list" v-if="role == 'city'">
            <div class="tip-dialog__item" v-for="(item, index) in modelCurrentList" :key="index">
              <div class="tip-dialog__item-title">{{item.title}}</div>
              <div class="tip-dialog__item-intro" v-show="item.intro != undefined">{{item.intro}}</div>
              <div class="tip-dialog__item-detail" v-show="item.detail != undefined">{{item.detail}}</div>
            </div>
          </div>
          <div class="tip-dialog__list" v-else>
            <div class="tip-dialog__item" v-for="(item, index) in modelCurrentList" :key="index">
              <div class="tip-dialog__item-title">{{item.title}}</div>
              <div class="tip-dialog__item-intro" v-show="item.intro != undefined">{{item.intro}}</div>
              <div class="tip-dialog__item-detail" v-show="item.detail != undefined">{{item.detail}}</div>
            </div>
          </div>
          <div class="footer-tip">了解更多信息，请登录PC端运营数据展示系统</div>
        </div>
      </div>
    </div>
    <van-overlay class="page-loading" :show="pageLoading" :duration="0">
      <div class="wrapper">
        <van-loading size="34px" vertical>数据加载中...</van-loading>
      </div>
    </van-overlay>
  </div>
</template>

<script>
  import Header from '@/components/Header'
  import LineChart from '@/components/LineChart'
  import LineChartIncome from './LineChart'
  import PieChart from '@/components/PieChart'
  import 'swiper/dist/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  import WaterMark from '@/components/WaterMark'
  import data from './default-data.js'

  export default {
    components:{
      Header,
      swiper,
      swiperSlide,
      LineChart,
      WaterMark,
      PieChart,
      LineChartIncome
    },
    data,
    methods: {
      help(num) {
        if(num === 0) {
          this.modelCurrentList = [ this.tipDialog.datalist[num] ];
        } else if(num === 1) {
          this.modelCurrentList = this.tipDialog.datalist.slice(1, 4);
        } else if(num === 2) {
          this.modelCurrentList = this.tipDialog.datalist.slice(4, 7);
        } else if(num === 3) {
          this.modelCurrentList = this.tipDialog.datalist.slice(7, 10);
        } else if(num === 4) {
          this.modelCurrentList = this.tipDialog.datalist.slice(10, 13);
        }else if(num === 5) {
          this.modelCurrentList = this.tipDialog.datalist.slice(13, 19);
        }else if(num === 6) {
          this.modelCurrentList = this.tipDialog.monthlist.slice(0,1);
        }else if(num === 7) {
          this.modelCurrentList = this.tipDialog.monthlist.slice(1, 2);
        }else if(num === 8) {
          this.modelCurrentList = this.tipDialog.monthlist.slice(2, 5);
        }else if(num === 9) {
          this.modelCurrentList = this.tipDialog.monthlist.slice(5, 8);
        }else if(num === 10) {
          this.modelCurrentList = this.tipDialog.monthlist.slice(8, 11);
        }else if(num === 11) {
          this.modelCurrentList = this.tipDialog.monthlist.slice(11, 14);
        }else if(num === 11) {
          this.modelCurrentList = this.tipDialog.monthlist.slice(11, 14);
        }else if(num === 12) {
          this.modelCurrentList = this.tipDialog.monthlist.slice(14, 20);
        }else if(num === 13) {
          this.modelCurrentList = this.tipDialog.yearlist.slice(0, 1);
        }else if(num === 14) {
          this.modelCurrentList = this.tipDialog.yearlist.slice(1, 2);
        }else if(num === 15) {
          this.modelCurrentList = this.tipDialog.yearlist.slice(2, 4);
        }else if(num === 16) {
          this.modelCurrentList = this.tipDialog.yearlist.slice(4, 7);
        }else if(num === 17) {
          this.modelCurrentList = this.tipDialog.yearlist.slice(7, 9);
        }else if(num === 18) {
          this.modelCurrentList = this.tipDialog.yearlist.slice(9, 11);
        }else if(num === 19) {
          this.modelCurrentList = this.tipDialog.yearlist.slice(11, 16);
        }
        this.tipDialog.show = true;
      },
      //日期选择
      chooseDate() {
        this.datePicker.show = true
      },
      //取消日期设置
      handleCanleDate() {
        this.datePicker.show = false
      },
      //获得时间域
      getMaxMinMonth() {
        function dateSplit(param) {
          let paramStr = param + ''
          let dateStr = paramStr.replace(/(.{2})/g,'$1,')
          let dateArr = dateStr.substr(0, dateStr.length - 1).split(',')
          return dateArr
        }
        return new Promise((resolve, reject) => {
          this.$http.post('/api/yearCheckIndex/maxMonth', {type: '3'}).then(data => {
            let max = data.maps[0].MAX_DATE
            let min = data.maps[0].MIN_DATE

            let maxYear = dateSplit(max)[0] + dateSplit(max)[1]
            let maxMonth = dateSplit(max)[2]
            let maxDay= dateSplit(max)[3]
            let minYear = dateSplit(min)[0] + dateSplit(min)[1]
            let minMonth = dateSplit(min)[2]
            let minDay= dateSplit(min)[3]
            let actualMaxMonth = parseInt(maxMonth) - 1
            let actualMinMonth = parseInt(minMonth) - 1
            let showMaxMonth = maxMonth[0] == '0' ? maxMonth[1] : maxMonth
            let showMaxDay = maxDay[0] == '0' ? maxDay[1] : maxDay

            this.datePicker.currentDate = new Date(maxYear, actualMaxMonth, maxDay)
            this.datePicker.minDate = new Date(minYear, actualMinMonth, minDay)
            this.datePicker.maxDate = new Date(maxYear, actualMaxMonth, maxDay)

            this.datePicker.showData = maxYear + '年' + showMaxMonth + '月' + showMaxDay + '日'
            this.datePicker.selectDate = maxYear + '' + maxMonth + '' + maxDay

            resolve("ok")
          })
        })
      },
      //选择日期
      handleConfirmDate(value) {
        this.handleCanleDate()
        let date = new Date(value)
        let year = date.getFullYear()
        let month = date.getMonth() + 1
        let day = date.getDate()
        let month1 = month < 10 ? '0' + month : month
        let day1 = day < 10 ? '0' + day : day
        this.datePicker.showData = year + '年' + month + '月' + day + '日'
        this.datePicker.selectDate = year + '' + month1 + '' + day1
        this.initPage()
      },
      //获得地市
      getAreaInfo() {
        let params = {
          statMonth: this.datePicker.selectDate,
          areaId: this.areaId
        }

        this.$http
          .post("api/yearCheckIndex/getKpiAreaInfo", params)
          .then(data => {
            //获取省会
            if (data.rows.length > 1) {
              this.areaInfo.columns = []
              data.rows.forEach(item => {
                this.areaInfo.columns.push({
                  text: item.area,
                  id: item.areaId
                })
              })
              this.areaInfo.columns.unshift({ text: "全国", id: "100000" })
              this.cityInfo.columns.unshift({ text: "地市", id: "0" })
              this.areaInfo.showArea = '全国'
            }
            //获取地市
            if (data.rows2.length > 1) {
              this.cityInfo.columns = []
              data.rows2.forEach(item => {
                this.cityInfo.columns.push({
                  text: item.area,
                  id: item.areaId
                });
              });
              this.cityInfo.columns.unshift({ text: "地市", id: "0" })
              this.areaInfo.selectId = data.rows[0].areaId
              this.areaInfo.showArea = data.rows[0].area
              if (this.role == "province") {
                this.areaInfo.columns.push(
                  {
                    text: data.rows[0].area,
                    id: data.rows[0].areaId
                  }
                )
                this.areaInfo.defaultIndex = 1
              }
            } else if (data.rows2.length == 1 ) {
              if (this.role == "city") {
                this.areaInfo.selectId = data.rows[0].areaId
                this.areaInfo.showArea = data.rows[0].area
                this.areaInfo.columns = [
                  {
                    text: data.rows[0].area,
                    id: data.rows[0].areaId
                  }
                ]
                this.cityInfo.selectId = data.rows2[0].areaId
                this.cityInfo.showArea = data.rows2[0].area
                this.cityInfo.defaultIndex = 1
                this.cityInfo.columns = [
                  {
                    text: data.rows2[0].area,
                    id: data.rows2[0].areaId
                  }
                ]
              }
            }
          });
      },
      //
      changeRankClass(value) {
        if (value > 0) {
          return 'trend--asc'
        } else if (value < 0) {
          return 'trend--desc'
        } else {
          return 'trend--zero'
        }
      },
      //获得跨行业日报
      getDailyPaper() {
        let params = {
          area_id: this.areaId,
          stat_date: this.datePicker.selectDate,
        }
        this.paperData = {
          ITEM0_1: '',
          ITEM0_2: '',
          ITEM0_3: '',
          ITEM1_1: '',
          ITEM1_2: '',
          ITEM1_3: '',
          ITEM1_4: '',
          ITEM2_1: '',
          ITEM2_2: '',
          ITEM2_3: '',
          ITEM2_4: '',
          ITEM3_1: '',
          ITEM3_2: '',
          ITEM3_3: '',
          ITEM3_4: '',
          ITEM4_1: '',
          ITEM4_2: '',
          ITEM4_3: '',
          ITEM4_4: '',
          ITEM5_1: '',
          ITEM5_2: '',
          ITEM5_3: '',
          ITEM6_1: '',
          ITEM6_2: '',
          ITEM6_3: '',
          ITEM7_1: '',
          ITEM7_2: '',
          ITEM7_3: '',
          ITEM8_1: '',
          ITEM8_2: '',
          ITEM8_3: '',
          ITEM8_4: '',
          ITEM8_5: '',
          ITEM9_1: '',
          ITEM9_2: '',
          ITEM9_3: '',
          ITEM9_4: '',
          ITEM9_5: '',
          ITEM10_1: '',
          ITEM10_2: '',
          ITEM10_3: '',
          ITEM10_4: '',
          ITEM10_5: '',
          ITEM11_1: '',
          ITEM11_2: '',
          ITEM11_3: '',
          ITEM11_4: '',
          ITEM11_5: '',
          ITEM12_1: '',
          ITEM12_2: '',
          ITEM12_3: '',
          ITEM13_1: '',
          ITEM13_2: '',
          ITEM13_3: '',
          ITEM14_1: '',
          ITEM14_2: '',
          ITEM14_3: '',
          ITEM15_1: '',
          ITEM15_2: '',
          ITEM15_3: '',
          ITEM15_4: '',
          ITEM15_5: '',
          ITEM16_1: '',
          ITEM16_2: '',
          ITEM16_3: '',
          ITEM16_4: '',
          ITEM16_5: '',
          ITEM17_1: '',
          ITEM17_2: '',
          ITEM17_3: '',
          ITEM17_4: '',
          ITEM17_5: '',
          ITEM18_1: '',
          ITEM18_2: '',
          ITEM18_3: '',
          ITEM18_4: '',
          ITEM18_5: '',
          ITEM19_1: '',
          ITEM19_2: '',
          ITEM19_3: '',
          ITEM20_1: '',
          ITEM20_2: '',
          ITEM20_3: '',
          ITEM20_4: '',
          ITEM22_1: '',
          ITEM22_2: '',
          ITEM22_3: '',
          ITEM23_1: '',
          ITEM23_2: '',
          ITEM23_3: '',
          ITEM24_1: '',
          ITEM25_1: '',
          ITEM26_1: '',
          ITEM26_2: '',
          ITEM27_1: '',
          ITEM27_2: '',
          ITEM28_1: '',
          ITEM28_2: '',
          ITEM29_1: '',
          ITEM29_2: '',
          ITEM30_1_1: '',
          ITEM30_1_2: '',
          ITEM30_1_3: '',
          ITEM30_2_1: '',
          ITEM30_2_2: '',
          ITEM30_2_3: '',
          ITEM30_3_1: '',
          ITEM30_3_2: '',
          ITEM30_3_3: '',
          ITEM100_1: '',
          ITEM100_2: '',
          ITEM100_3: '',
          ITEM100_4: '',
          ITEM100_5: '',
          ITEM100_6: '',
        }
        this.pieData.data = []
        this.paperDataLoading = true
        return new Promise((resolve, reject) => {
          this.$http.post('/api/cross/qryMainKpi', params).then(data => {
            let list = data.qryMainKpiList
            if (list.length > 0) {
              this.paperData = data.qryMainKpiList[0]
            }
            let total = this.paperData.ITEM2_1
            this.pieData.data.push(
              {
                name: '历史累计孵化期客户数',
                value: this.paperData.ITEM30_1_1,
                percentage: this.getPercentate(this.paperData.ITEM30_1_1, total)
              },
              {
                name: '历史累计合作期客户数',
                value: this.paperData.ITEM30_2_1,
                percentage: this.getPercentate(this.paperData.ITEM30_2_1, total)
              },
              {
                name: '历史累计离网期客户数',
                value: this.paperData.ITEM30_3_1,
                percentage: this.getPercentate(this.paperData.ITEM30_3_1, total)
              },
            )
            this.paperDataLoading = false
            resolve('ok')
          })
        })
      },
      //求百分比
      getPercentate(value, total) {
        if (total == 0) {
          return 0
        } else {
          return ((value / total)*100).toFixed(2)
        }
      },
      //获得月收入变化趋势
      getMonthTrend() {
        let params = {
          area_id: this.areaId,
          stat_date: this.datePicker.selectDate,
          tagType: this.tagType.monthSelect,
        }

        this.monthTrend.lineData.data = []
        this.monthTrend.lineDataIncome.data = []
        return new Promise((resolve, reject) => {
          this.$http.post('/api/cross/qryLineChart', params).then(data => {
            let list = data.qryLineChartList
            if (this.tagType.monthSelect == '0') {
              list.forEach((item, index) => {
                if (index == 5) {
                  this.monthTrend.lineDataIncome.data.push({
                    date: item.name,
                    value: item.id,
                  })
                } else {
                  this.monthTrend.lineDataIncome.data.push({
                    date: item.name,
                    value: item.id,
                    value1: item.text,
                  })
                }
              })
            } else {
              list.forEach(item => {
                this.monthTrend.lineData.data.push({
                  date: item.name,
                  value: item.id
                })
              })
            }
            resolve('ok')
          })
        })
      },
      //获得月收入变化趋势
      getDayTrend() {
        let params = {
          area_id: this.areaId,
          stat_date: this.datePicker.selectDate,
          tagType: this.tagType.daySelect,
        }

        this.dayTrend.lineData.data = []
        return new Promise((resolve, reject) => {
          this.$http.post('/api/cross/qryBarChart', params).then(data => {
            let list = data.qryBarChartList
            if (this.tagType.daySelect == '0') {
              this.dayTrend.lineData.unit = '万元'
            } else {
              this.dayTrend.lineData.unit = '个'
            }
            list.forEach(item => {
              this.dayTrend.lineData.data.push({
                date: item.id,
                value: item.name
              })
            })
            resolve('ok')
          })
        })
      },
      //获得月收入累计
      getMonthIncome() {
        let params = {
          stat_date: this.datePicker.selectDate,
          tagType: this.tagType.monthIncome,
          areaId: this.areaId,
        }
        this.monthIncomeData.loading = true
        this.monthIncomeData.listAll = []
        this.monthIncomeData.showList = []
        this.monthIncomeData.rank = 'asc'
        return new Promise((resolve, reject) => {
          this.$http.post('/api/cross/qryDownChart2', params).then(data => {
            let list = data.qryDownChart2List
            let len = list.length
            this.monthIncomeData.listAll = list

            this.handleSynthesisListRank('monthIncome', true)
            this.monthIncomeData.loading = false
            resolve('ok')
          })
        })
      },
      //获得日收入
      getDayIncome() {
        let params = {
          stat_date: this.datePicker.selectDate,
          tagType: this.tagType.dayIncome,
          areaId: this.areaId,
        }
        this.dayIncomeData.loading = true
        this.dayIncomeData.listAll = []
        this.dayIncomeData.showList = []
        this.dayIncomeData.rank = 'asc'
        return new Promise((resolve, reject) => {
          this.$http.post('/api/cross/qryDownChart1', params).then(data => {
            let list = data.qryDownChart1List
            let len = list.length
            this.dayIncomeData.listAll = list
            
            this.handleSynthesisListRank('dayIncome', true)
            this.dayIncomeData.loading = false
            resolve('ok')
          })
        })
      },
      //显示全部排名
      handleSynthesisListRank(item, param) {
        if (item == 'monthIncome') {
          if (param == false) {
            let len = this.monthIncomeData.listAll.length
            this.monthIncomeData.showList = this.monthIncomeData.listAll.slice(0, len)
            this.monthIncomeData.showAll = true
          } else {
            this.monthIncomeData.showList = this.monthIncomeData.listAll.slice(0, 5)
            this.monthIncomeData.showAll = false
          }
        } else if (item == 'dayIncome') {
          if (param == false) {
            let len = this.dayIncomeData.listAll.length
            this.dayIncomeData.showList = this.dayIncomeData.listAll.slice(0, len)
            this.dayIncomeData.showAll = true
          } else {
            this.dayIncomeData.showList = this.dayIncomeData.listAll.slice(0, 5)
            this.dayIncomeData.showAll = false
          }
        }
      },
      //排序
      handleRank(item, rank) {
        if (item == 'monthIncome') {
          if (this.monthIncomeData.rank != rank) {
            this.monthIncomeData.rank = rank
            this.monthIncomeData.listAll.reverse()
            this.handleSynthesisListRank('monthIncome', true)
          }
        } else if(item == 'dayIncome') {
          if (this.dayIncomeData.rank != rank) {
            this.dayIncomeData.rank = rank
            this.dayIncomeData.listAll.reverse()
            this.handleSynthesisListRank('dayIncome', true)
          }
        }
      },
      //切换变化趋势种类
      handleChangeType(item, id, name) {
        if (item == 'monthSelect') {
          if(this.tagType.monthSelect != id) {
            this.tagType.monthSelect = id
            this.tagType.monthSelectName = name
            this.getMonthTrend()
          }
        } else if (item == 'daySelect') {
          if(this.tagType.daySelect != id) {
            this.tagType.daySelect = id
            this.tagType.daySelectName = name
            this.getDayTrend()
          }
        } else if (item == 'monthIncome') {
          this.tagType.monthIncome = id
          this.tagType.monthIncomeName = name
          this.getMonthIncome()
        } else if (item == 'dayIncome') {
          this.tagType.dayIncome = id
          this.tagType.dayIncomeName = name
          this.getDayIncome()
        }
      },
      //显示地市弹框
      chooseCity(area) {
        if (area == 'province') {
          this.areaInfo.show = true
        } else if (area == 'city') {
          this.cityInfo.show = true
        }
      },
      //取消地市弹框
      cancelFn(area) {
        if (area == 'province') {
          this.areaInfo.show = false
        } else if (area == 'city') {
          this.cityInfo.show = false
        }
      },
      //确认
      confirmFnProvince(item, index) {
        if (this.areaInfo.selectId != item.id) {
          this.areaInfo.selectId = item.id
          this.areaId = item.id
          this.areaInfo.showArea = item.text
          this.cityInfo.columns = []
          this.cityInfo.showArea = '地市'
          if (this.role == 'province') {
            if (this.areaId != '100000') {
              this.areaInfo.columns = []
              this.getAreaInfo()
            } else {
              this.cityInfo.columns = [{text: '地市', id: '0'}]
            }
          } else {
            this.getAreaInfo()
          }
          this.initPage()
        }
        this.areaInfo.show = false
      },
      //确认地市
      confirmFnCity(item, index) {
        if (this.cityInfo.selectId != item.id) {
          this.cityInfo.selectId = item.id
          this.cityInfo.showArea = item.text
          if (this.cityInfo.selectId != '' && this.cityInfo.selectId != 0) {
            this.areaId = item.id
          } else {
            this.areaId = this.areaInfo.selectId
          }
          this.initPage()
        }
        this.cityInfo.show = false
      },
      //数字初始化
      numFormat(num) {
        return (num+ '').replace(/(\d{1,3})(?=(\d{3})+(?:$|\.))/g,'$1,')
      },
      //记录日志
      recordLogs() {
        let params = {
          userId: this.userInfo.user_id,
          verify_code: this.userInfo.verify_code,
          priv_id: '10100751',
        }

        this.$http.post("api/new/insertLogs", params).then(res => {})
      },
      //页面初始化
      initPage() {
        this.pageLoading = true
        Promise.all([
          this.getDailyPaper(),
          this.getMonthTrend(),
          this.getDayTrend(),
          this.getMonthIncome(),
          this.getDayIncome()
        ])
        .then(values => {
          this.pageLoading = false
        });
      }
    },
    created(){
      this.recordLogs()
      this.getMaxMinMonth().then(res => {
        if (res == 'ok') {
          this.getAreaInfo()
          this.initPage()
        }
      })
    }
  }
</script>

<style lang="scss" scoped>
  .paper-content {
    padding: 10px 12px;
  }
  .title-box{
    height: 24px;
    margin-bottom: 10px;
  }
  .helpBtn{
    width: 24px;
    height: 24px;
    background: url(~@/assets/images/icon-help1.png) center no-repeat;
    border-radius:10px;
    border: none;
    float: left
  }

  .paper-title {
    font-size: 16px;
    //margin-bottom: 10px;
    position: relative;

    &::before {
      content: "";
      display: inline-block;
      width: 1.5em;
      height: 1.5em;
      vertical-align: top;
      background-size: 80% 80%;
      background-repeat: no-repeat;
      background-position: left center;
    }

    &__ranks {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 12px;

      &--asc {
        .paper-title__rank--asc {
          color: #ff4b47;

          &::before {
            background-image: url(~@/assets/images/target/icon-asc-on.png);
          }
        }
      }

      &--desc {
        .paper-title__rank--desc {
          color: #ff4b47;

          &::before {
            background-image: url(~@/assets/images/target/icon-desc-on.png);
          }
        }
      }
    }

    &__rank {
      padding-left: 10px;

      &::before {
        content: "";
        display: inline-block;
        width: 1.5em;
        height: 1.5em;
        vertical-align: top;
        background-size: 100% 100%;
        margin-right: 6px;
      }

      &--asc {
        &::before {
          background-image: url(~@/assets/images/target/icon-asc-off.png);
        }
      }

      &--desc {
        &::before {
          background-image: url(~@/assets/images/target/icon-desc-off.png);
        }
      }
    }
  }
  @each $icon in account, client, contract, income, opportunity, order, tenant, trend, incometotal {
    .paper-title-#{$icon}::before {
      background-image: url(~@/assets/images/dailyPaper/icon-#{$icon}.png);
    }
  }

  .paper-card {
    border: 1px solid #EFF2FC;
    border-radius: 8px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
    margin-bottom: 10px;

    &__item {
      padding: 12px 16px;
      position: relative;

      &--with-img {
        padding-left: 66px;

        &::before {
          content: "";
          position: absolute;
          width: 54px;
          height: 40px;
          background: url(~@/assets/images/dailyPaper/icon-chart.png);
          background-size: 100% 100%;
          left: 0;
          top: 50%;
          margin-top: -20px;
        }
      }

      .van-loading {
        display: inline-block;
      }
    }

    &__name {
      font-size: 14px;
      margin-bottom: 8px;
      position: relative;

      &--border {
        &::before {
          content: "";
          display: inline-block;
          background: #50D3BF;
          width: 4px;
          height: 16px;
          vertical-align: middle;
          margin-right: 6px;
        }
      }

      &-right {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }

    &__blocks {
      display: flex;
      align-items: center;
    }

    &__block {
      flex: 1;

      &--none {
        flex: none;
      }
    }

    &__num {
      font-size: 20px;
    }

    .trend {
      font-size: 14px;
    }

    &__tip {
      color: #666;
    }

    &--vertical {
      .paper-card__item + .paper-card__item {
        border-top: 1px solid #e7e7e7;
      }
    }

    &--horizontal {
      display: flex;

      .paper-card__item {
        flex: 1;

        & + .paper-card__item {
          &::before {
            content: "";
            position: absolute;
            width: 1px;
            background: #e7e7e7;
            left: 0;
            top: 14px;
            bottom: 14px;
          }
        }
      }
    }

    &__label {
      padding: 6px 10px;
      font-size: 13px;
      border-radius: 2px;
      display: inline-block;

      & + & {
        margin-left: 10px;
      }

      &--red {
        background: #FDF2F1;
        color: #FF5F70;
      }

      &--green {
        background: #E9F7F0;
        color: #43A073;
      }
    }
  }
  .taglist {
    .swiper-slide {
      line-height: 25px;
      text-align: center;
      box-sizing: border-box;
      width: 50px;

      &:nth-child(3),
      &:nth-last-child(1),
      &:nth-last-child(2) {
        width: 70px;
      }
    }

    &__inner {
      border: 1px solid #ccc;
      border-radius: 13px;

      &--current {
        color: #FE4543;
        border-color: #FE4543;
        background-color: #FFF6F5;
      }
    }
  }
  .table-wrap {
    box-shadow: 0 0 6px 3px rgba(226, 226, 226, .45);
    border-radius: 2px;
    overflow: hidden;
  }

  /deep/
  .paper-tabs {
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .init-tabs {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      flex: 1;
    }

    .van-tabs__wrap {
      flex: none;
      box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
    }

    .van-tabs__content {
      flex: 1;
      position: relative;
    }

    .van-tab__pane {
      padding: 10px 12px;
      overflow: auto;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      -webkit-overflow-scrolling: touch;
    }
  }
  /deep/
  .swiper-container {
    position: initial;
  }
  /deep/
  .swiper-wrapper {
    position: initial;
  }
  /deep/
  .daily-tabs.van-tabs--line .van-tabs__wrap {
    padding-left: 10px;
    padding-right: 10px;
  }

  .pie-chart {
    height: 180px;
    position: relative;

    &__total {
      position: absolute;
      left: 25%;
      top: 50%;
      text-align: center;
      transform: translate(-50%, -50%);

      &-name {
        font-size: 12px;
      }

      &-num {
        font-size: 16px;
      }
    }
  }

  .selects__item--date {
    flex: none;
    width: 33%;
  }

  .tip {
    padding-top: 8px;
    color: #999;
  }

  .page-loading {
    z-index: 100!important;

    .wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }
  }
</style>
